/**
  * 头部菜单
  */ 
<template>
  <el-menu class="top-menu-demo" background-color="rgb(42 57 86)">
    <div class="top-menu-left">
      <div>
        <el-avatar class="img"> icon </el-avatar>
      </div>
      <div class="menu-left-title">英语听说模拟训练系统</div>
    </div>

    <div class="top-menu-center">
      <div
        class="menu-center-item"
        :class="{ 'item-active': cIndex == index }"
        v-for="(item, index) in this.topMenuInfo"
        :key="index"
        @click="toPath(item, index)"
      >
        {{ item.text }}
      </div>
    </div>

    <div class="f-flex"></div>

    <div class="top-menu-right">
      <img class="t-btn" src="~Assets/img/top-icon-message.png" alt="" />
      <!-- :size="60" -->
      <el-avatar class="t-btn top-menu-avatar" :src="imgAvatar"></el-avatar>
      <div class="top-menu-text">欢迎您，{{ account }}</div>
      <img
        class="t-btn"
        src="~Assets/img/top-icon-exit.png"
        @click="btnLogout()"
      />
    </div>

    <!-- 弹出框组件 -->
    <f-dialog ref="exitDialog" @confirm="confirmLogout"></f-dialog>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
import { TOKEN } from "@/utils/const";

// 引入公共组件
import NormalDialog from "../content/Dialog/NormalDialog";

export default {
  name: "navcon",

  components: {
    "f-dialog": NormalDialog,
  },

  data() {
    return {
      // 当前选中菜单模块下标
      cIndex: 0,
    };
  },

  computed: {
    ...mapState({
      // 本地缓存中的用户账号
      account: (state) => state.adminAccount,
      // 本地缓存中的图片
      imgAvatar: (state) => state.avatar,
      // 当前页面路由列表
      topMenuInfo: (state) => state.routerLink.teacherLink,
    }),
  },

  // 创建完毕状态(里面是操作)
  created() {
    console.log("路由列表 =>", this.topMenuInfo);
    // this.user = JSON.parse(localStorage.getItem("userdata"));
  },

  methods: {
    // 切换路由
    toPath(item, index) {
      if (this.cIndex == index) return;
      this.cIndex = index;
      this.$router.push({ path: `/manage-index${item.path}` });
    },

    // 点击退出登录按钮 「出现确认对话框」
    btnLogout() {
      this.$refs.exitDialog.showTip("亲，确认退出英语听说模拟系统？");
    },

    // 确认退出
    confirmLogout() {
      // 清除token记录
      localStorage.setItem(TOKEN, "");
      this.$refs.exitDialog.onClose();
      this.$router.push({ path: "/" });
      this.$message({
        type: "success",
        message: "已退出登录!",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top-menu-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px 0 35px;
  color: #fff;
  user-select: none;
  // 左侧
  .top-menu-left {
    display: flex;
    align-items: center;
    .img {
      color: #000;
      background: #fff;
    }
    .menu-left-title {
      margin-left: 15px;
      font-size: @t6;
    }
  }
  // 中间
  .top-menu-center {
    margin-left: 10%;
    display: flex;
    color: @gray2-color;
    // 菜单元素
    .menu-center-item {
      margin-left: 75px;
      font-size: 15px;
      cursor: pointer;
      &:first-child {
        margin-left: 0;
      }
    }
    // 激活状态
    .item-active {
      color: #fff;
    }
  }

  // 右侧
  .top-menu-right {
    display: flex;
    align-items: center;
    .t-btn {
      width: 36px;
      height: 36px;
      cursor: pointer;
      transition: all 0.5s linear;
    }
    .top-menu-avatar {
      margin-left: 10px;
    }
    .top-menu-avatar {
      margin-left: 10px;
    }
    .top-menu-text {
      margin: 0 15px;
      font-size: @t6;
    }
  }
}
</style>